<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
     
      <el-form-item label="设备ID" prop="equipmentId">
        <el-input
          v-model="queryParams.equipmentId"
          placeholder="请输入设备ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备类型" prop="equipmentType">
        <el-select
          v-model="queryParams.equipmentType"
          placeholder="请选择设备类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in equipmentTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备型号" prop="equipmentModel">
        <el-input
          v-model="queryParams.equipmentModel"
          placeholder="请输入设备型号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属机柜" prop="machineCabinet">
        <el-select
          v-model="queryParams.machineCabinet"
          placeholder="请选择所属机柜"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in cabinetOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="运行状态" prop="runningStatus">
        <el-select
          v-model="queryParams.runningStatus"
          placeholder="请选择运行状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in runningStatusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:equipment:add']"
        >
          新增
        </el-button>
      </el-col>
       <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:equipment:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:equipment:export']"
        >
          导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>


    <el-table v-loading="loading" :data="equipmentList" @row-click="toClick" @sort-change="tableSortChg">
      <el-table-column label="#" align="center" width="55">
        <template slot-scope="scope">
          <span>
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="设备ID" align="center" prop="equipmentId" sortable="custom" />
      <el-table-column
        label="设备类型"
        align="center"
        :formatter="equipmentTypeMatter"
        prop="equipmentType"
      />
      <el-table-column label="设备型号" align="center" prop="equipmentModel" sortable="custom"/>
      <el-table-column
        label="所属机柜"
        align="center"
        prop="machineCabinet"
      >
      <template slot-scope="scope">
          <span class="showDetailCell font-blue" @click.stop="lookCabinet(scope.row)">
            {{ cabinetOptionsMatter(scope.row) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="运行状态"
        align="center"
        :formatter="runningStatusMatter"
        prop="runningStatus"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['system:equipment:edit']"
          >
            修改
          </el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:equipment:remove']"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备对话框 -->
    <el-dialog :title="title" :visible.sync="open" :width="getDialogWidth()" append-to-body @closed="clearFiles">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="5">
            <div style="max-height:45vh;overflow-y:auto;border-right:#DCDFE6 solid 1px;">
              <el-upload 
              :headers="upload.headers"
              :file-list="fileList"
              :action="field101Action"
              :before-upload="imgUpload"
              :on-success="imgFileSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              list-type="picture-card"
              accept="image/*">
              <i class="el-icon-plus"></i>
            </el-upload>
            </div>
          </el-col>
          <el-col :span="19">
            <el-col :span="12">
              <el-form-item label="设备ID" prop="equipmentId">
                <el-input v-model="form.equipmentId" placeholder="请输入设备ID" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属系统" prop="system">
                <el-input v-model="form.system" placeholder="请输入所属系统" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属机柜" prop="machineCabinet">
                <el-select
                  v-model="form.machineCabinet"
                  placeholder="请选择所属机柜"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="dict in cabinetOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类型" prop="equipmentType">
                <el-select
                  v-model="form.equipmentType"
                  placeholder="请选择设备类型"
                  clearable
                  @change="selectType()"
                >
                  <el-option
                    v-for="dict in equipmentTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备型号" prop="equipmentModel">
                <el-input
                  v-model="form.equipmentModel"
                  placeholder="请输入设备型号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运行状态" prop="runningStatus">
                <el-select
                  v-model="form.runningStatus"
                  placeholder="请选择运行状态"
                  clearable
                >
                  <el-option
                    v-for="dict in runningStatusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
             <el-divider content-position="left">附加属性</el-divider> 
            </el-col>
            <div v-for="(it, index) in addList" :key="index">
            <el-col :span="12" v-if="it.deviceCondition == 'number'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    type="number"
                    v-model="it.value"
                  >
                    <template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'double'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    type="number"
                    v-model="it.value"
                  >
                    <template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" v-if="it.deviceCondition == '100'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    v-model="it.value"
                    :maxlength="getNum(it.deviceCondition)"
                    show-word-limit
                  ><template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" v-if="it.deviceCondition == '200'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    v-model="it.value"
                    :maxlength="getNum(it.deviceCondition)"
                    show-word-limit
                  ><template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" v-if="it.deviceCondition == 'textarea'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    type="textarea"
                    placeholder="请输入"
                    v-model="it.value"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'select'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-select v-model="it.value" placeholder="请选择" clearable>
                    <el-option
                      v-for="dict in it.options"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'radio'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-select v-model="it.value" placeholder="请选择" clearable>
                    <el-option
                      v-for="dict in it.options"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'checkbox'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-select
                  v-model="it.value"
                  multiple
                  collapse-tags
                  placeholder="请选择">
                  <el-option
                    v-for="dict in it.options"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue">
                  </el-option>
                </el-select>
                </el-form-item>
              </div>
            </el-col>
          </div>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="填报部门" prop="fillDept">
                <el-input
                  v-model="form.fillDept"
                  placeholder="请输入填报部门"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="填报人" prop="fillBy">
                <el-input
                  v-model="form.fillBy"
                  placeholder="请输入填报人"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-col>
          </el-col>
        </el-row>





        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="设备ID" prop="equipmentId">
              <el-input v-model="form.equipmentId" placeholder="请输入设备ID" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属系统" prop="system">
              <el-input v-model="form.system" placeholder="请输入所属系统" />
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="所属机柜" prop="machineCabinet">
              <el-select
                v-model="form.machineCabinet"
                placeholder="请选择所属机柜"
                clearable
              >
                <el-option
                  v-for="dict in cabinetOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="equipmentType">
              <el-select
                v-model="form.equipmentType"
                placeholder="请选择设备类型"
                clearable
                @change="selectType()"
              >
                <el-option
                  v-for="dict in equipmentTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="equipmentModel">
              <el-input
                v-model="form.equipmentModel"
                placeholder="请输入设备型号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运行状态" prop="runningStatus">
              <el-select
                v-model="form.runningStatus"
                placeholder="请选择运行状态"
                clearable
              >
                <el-option
                  v-for="dict in runningStatusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row style="margin-left: 30px;">
          <el-col :span="24">
              <el-upload 
              :headers="upload.headers"
              :file-list="fileList"
              :action="field101Action"
              :before-upload="imgUpload"
              :on-success="imgFileSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              list-type="picture-card"
              accept="image/*">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-row> -->
        <!-- <el-divider content-position="left">附加属性</el-divider> -->
        <!-- <el-row>
          <div v-for="(it, index) in addList" :key="index">
            <el-col :span="12" v-if="it.deviceCondition == 'number'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    type="number"
                    v-model="it.value"
                  >
                    <template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'double'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    type="number"
                    v-model="it.value"
                  >
                    <template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" v-if="it.deviceCondition == '100'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    v-model="it.value"
                    :maxlength="getNum(it.deviceCondition)"
                    show-word-limit
                  ><template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" v-if="it.deviceCondition == '200'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    placeholder="请输入"
                    v-model="it.value"
                    :maxlength="getNum(it.deviceCondition)"
                    show-word-limit
                  ><template slot="append" v-if="it.unit">{{ unitMatter(it) }}</template></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" v-if="it.deviceCondition == 'textarea'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-input
                    type="textarea"
                    placeholder="请输入"
                    v-model="it.value"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'select'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-select v-model="it.value" placeholder="请选择" clearable>
                    <el-option
                      v-for="dict in it.options"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'radio'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-select v-model="it.value" placeholder="请选择" clearable>
                    <el-option
                      v-for="dict in it.options"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" v-if="it.deviceCondition == 'checkbox'">
              <div>
                <el-form-item :label="it.deviceName">
                  <el-select
                  v-model="it.value"
                  multiple
                  collapse-tags
                  placeholder="请选择">
                  <el-option
                    v-for="dict in it.options"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue">
                  </el-option>
                </el-select>
                </el-form-item>
              </div>
            </el-col>
          </div>
        </el-row> -->

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="填报部门" prop="fillDept">
              <el-input
                v-model="form.fillDept"
                placeholder="请输入填报部门"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="填报人" prop="fillBy">
              <el-input
                v-model="form.fillBy"
                placeholder="请输入填报人"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          plain
          @click="handleDelete(form)"
          v-if="title == '修改设备'"
          v-hasPermi="['system:equipment:remove']"
        >
          删 除
        </el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" style="width: 120px;">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 设备管理导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!--        <div class="el-upload__tip" slot="tip">-->
        <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备属性数据-->
        <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
        <!--        </div>-->
        <div class="el-upload__tip" style="color: red;" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
          <el-link type="info" style="font-size: 12px;" @click="importTemplate">
            下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-dialog
      title="查看机柜"
      v-if="lookCabinetOpen"
      :visible.sync="lookCabinetOpen"
      :width="getDialogWidth()"
      append-to-body
    >
      <cabinetDetail :id="selectCabinetId"></cabinetDetail>
    </el-dialog>
  </div>
</template>

<script>
import cabinetDetail from '@/views/dialogDetail/cabinet.vue'
import { getInfo } from '@/api/login'
import {
  listEquipment,
  getEquipment,
  delEquipment,
  addEquipment,
  updateEquipment,
  exportEquipment,
  importTemplate,
  editQuery,
  saveOrUpdate,
} from '@/api/equipment/equipment'
import { cabinetDictList } from '@/api/machinecabinet/cabinet'
import { getToken } from '@/utils/auth'
export default {
  name: 'Equipment',
  components: {cabinetDetail},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备表格数据
      equipmentList: [],
      //所属机柜下拉选
      cabinetOptions: [],
      //设备类型下拉选
      equipmentTypeOptions: [],
      //运行状态下拉选
      runningStatusOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentId: null,
        equipmentModel:null,
        system: null,
        machineCabinet: null,
        equipmentType: null,
        orderby: null,
      },
      //追加条件的select参数
      fieldNameOptions: [],
      conditionOptions: [],
      //end
      addShow: false,
      searchOptions: {
        fieldName: '',
        condition: '',
        val: '',
      },
      // 文件上传
      field101Action: process.env.VUE_APP_BASE_API + "/common/upload",
      fileList: [],
      searchFormOptions: [],
      dialogImageUrl: '',
      dialogVisible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        equipmentId: [
          { required: true, message: '请输入设备ID', trigger: 'change' },
        ],
        system: [
          { required: true, message: '请输入所属系统', trigger: 'change' },
        ],
        machineCabinet: [
          { required: true, message: '请输入所属机柜', trigger: 'change' },
        ],
        equipmentType: [
          { required: true, message: '请输入设备类型', trigger: 'change' },
        ],
        equipmentModel: [
          { required: true, message: '请输入设备型号', trigger: 'change' },
        ],
        runningStatus: [
          { required: true, message: '请输入运行状态', trigger: 'change' },
        ],
      },
      // 设备导入参数
      upload: {
        // 是否显示弹出层（设备数据导入）
        open: false,
        // 弹出层标题（设备数据导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/equipment/importData',
      },
      addList: [],
      lookCabinetOpen: false,
      selectCabinetId: null,
      unitOptions:[]
    }
  },
  mounted(){
    if(this.$route.query.eqId){
      this.queryParams.equipmentId = decodeURIComponent(JSON.parse(JSON.stringify(this.$route.query)).eqId)
      this.handleQuery()
    }else{
      this.getList()
    }
  },
  created() {
    cabinetDictList().then((res) => {
      this.cabinetOptions = res.data
    })
    this.getDicts('equipment_type').then((response) => {
      this.equipmentTypeOptions = response.data
    })
    this.getDicts('running_status').then((response) => {
      this.runningStatusOptions = response.data
    })
    this.getDicts('operation').then((response) => {
      this.conditionOptions = response.data
    })
    this.getDicts('equipment_condition').then((response) => {
      this.fieldNameOptions = response.data
    })
    this.getDicts('num_unit').then((response) => {
      this.unitOptions = response.data
    })
  },
  activated(){
    if(this.$route.query.eqId){
      this.queryParams.equipmentId = decodeURIComponent(JSON.parse(JSON.stringify(this.$route.query)).eqId)
      this.handleQuery()
    }else{
      this.getList()
    }
    cabinetDictList().then((res) => {
      this.cabinetOptions = res.data
    })
    this.getDicts('equipment_type').then((response) => {
      this.equipmentTypeOptions = response.data
    })
    this.getDicts('running_status').then((response) => {
      this.runningStatusOptions = response.data
    })
    this.getDicts('operation').then((response) => {
      this.conditionOptions = response.data
    })
    this.getDicts('equipment_condition').then((response) => {
      this.fieldNameOptions = response.data
    })
    this.getDicts('num_unit').then((response) => {
      this.unitOptions = response.data
    })
  },
  methods: {
     tableSortChg(params) {
      this.queryParams.orderby = params.prop + ' ' + params.order.replace('ending', '')
      this.getList()
    }, 
    unitMatter(row, column) {
      return this.selectDictLabel(this.unitOptions, row.unit) || ''
    },
    stopC(e) {
      if (e && e.stopPropagation) {
        e.stopPropagation
      } else {
        window.event.cancelBubble
      }
    },
    toClick(row) {
      this.handleUpdate(row)
    },
    lookCabinet(row) {
      this.selectCabinetId = row.machineCabinet
      this.lookCabinetOpen = true
    },
    equipmentTypeMatter(row, column) {
      return this.selectDictLabel(this.equipmentTypeOptions, row.equipmentType)
    },
    cabinetOptionsMatter(row, column) {
      return this.selectDictLabel(this.cabinetOptions, row.machineCabinet)
    },
    runningStatusMatter(row, column) {
      return this.selectDictLabel(this.runningStatusOptions, row.runningStatus)
    },
    getNum(s) {
      return Number(s)
    },
    setFormUserInfo() {
      getInfo().then((res) => {
        console.log(res)
        this.$set(this.form, 'fillBy', res.user.userName)
        this.$set(this.form, 'fillById', res.user.userId)
        this.$set(this.form, 'fillDept', res.user.dept.deptName)
        this.$set(this.form, 'fillDeptId', res.user.dept.deptId)
      })
    },
    /** 查询设备列表 */
    getList() {
      this.loading = true
      let form = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        orderby: this.queryParams.orderby,
        queryData: [],
      }
      for (let i in this.searchFormOptions) {
        form.queryData.push({
          fieldName: this.searchFormOptions[i].fieldName
            .replace(/([A-Z])/g, '_$1')
            .toLowerCase(),
          condition: this.searchFormOptions[i].condition,
          val: this.searchFormOptions[i].val || '',
        })
      }
      listEquipment(form).then((response) => {
        this.equipmentList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    selectType() {
      let data = {
        equipmentType: this.form.equipmentType,
        equipmentIdKey: this.form.equipmentId,
      }
      editQuery(data).then((response) => {
        console.log(response)
        let tempArr = response.data.construction
        let dataArr = response.data.addProperties || []
        tempArr.forEach((e) => {
          if (
            e.deviceCondition == 'select' ||
            e.deviceCondition == 'checkbox' ||
            e.deviceCondition == 'radio'
          ) {
            this.getDicts(e.dataSource).then((response) => {
              this.$nextTick(()=>{
                e.options = response.data
              })
              // this.$set(e, 'options', response.data)
            })
          }
        })
        if (this.title != '添加设备') {
          if (dataArr.length) {
            dataArr.forEach((element) => {
              for (let key in tempArr) {
                if (tempArr[key].deviceName == element.deviceName) {
                  if (element.deviceCondition == 'checkbox') {
                    // tempArr[key].value = element.value.split(',')
                    this.$set(tempArr[key], 'value', element.value.split(','))
                  } else {
                    this.$set(tempArr[key], 'value', element.value)
                    // tempArr[key].value = element.value
                  }
                  break
                }
              }
            })
          }
        }
        this.addList = [...tempArr]
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    //追加条件操作
    openAddModel() {
      this.addShow = true
    },
    closeAddModel() {
      this.addShow = false
      this.searchOptions.fieldName = ''
      this.searchOptions.condition = ''
      this.searchOptions.val = ''
    },
    removeSearch(i) {
      if (this.queryParams[this.searchFormOptions[i].fieldName]) {
        this.queryParams[this.searchFormOptions[i].fieldName] = ''
      }
      this.searchFormOptions.splice(i, 1)
      this.getList()
    },
    addSearch() {
      if(!this.searchOptions.fieldName || !this.searchOptions.condition || !this.searchOptions.val){
        this.msgError('请填写完整搜索条件')
        return
      }
      let obj = { ...this.searchOptions }
      obj.tableName = this.selectDictLabel(this.fieldNameOptions, obj.fieldName)
      obj.conditionName = this.selectDictLabel(
        this.conditionOptions,
        obj.condition,
      )
      obj.textVal = obj.val
      this.searchFormOptions.push(obj)
      this.closeAddModel()
      this.getList()
    },
    cleanAllSearch() {
      this.searchFormOptions = []
      this.resetQuery()
    },
    //*******
    // 表单重置
    reset() {
      this.form = {
        id: null,
        equipmentId: null,
        system: null,
        machineCabinet: null,
        equipmentType: null,
        equipmentModel: null,
        dispatchLevel: null,
        maxRatedCurrent: null,
        materialId: null,
        runningStatus: null,
        brand: null,
        transmissionDistance: null,
        fillDept: null,
        fillBy: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1

      this.searchFormOptions = this.searchFormOptions.filter((res) => {
        return (
          res.fieldName != 'equipmentId' &&
          res.fieldName != 'machineCabinet' &&
          res.fieldName != 'equipmentType' &&
          res.fieldName != 'runningStatus'
        )
      })
      if (this.queryParams.equipmentId) {
        this.searchFormOptions.push({
          fieldName: 'equipmentId',
          condition: 'like',
          val: this.queryParams.equipmentId,
          tableName: '设备ID',
          conditionName: '',
          textVal: this.queryParams.equipmentId,
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'equipmentId'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'equipmentId') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.equipmentModel) {
        this.searchFormOptions.push({
          fieldName: 'equipmentModel',
          condition: 'like',
          val: this.queryParams.equipmentModel,
          tableName: '设备型号',
          conditionName: '',
          textVal: this.queryParams.equipmentModel,
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'equipmentModel'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'equipmentModel') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.machineCabinet) {
        this.searchFormOptions.push({
          fieldName: 'machineCabinet',
          condition: 'eq',
          val: this.queryParams.machineCabinet,
          tableName: '所属机柜',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.cabinetOptions,
            this.queryParams.machineCabinet,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'machineCabinet'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'machineCabinet') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.equipmentType) {
        this.searchFormOptions.push({
          fieldName: 'equipmentType',
          condition: 'eq',
          val: this.queryParams.equipmentType,
          tableName: '设备类型',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.equipmentTypeOptions,
            this.queryParams.equipmentType,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'equipmentType'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'equipmentType') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.runningStatus) {
        this.searchFormOptions.push({
          fieldName: 'runningStatus',
          condition: 'eq',
          val: this.queryParams.runningStatus,
          tableName: '运行状态',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.runningStatusOptions,
            this.queryParams.runningStatus,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'runningStatus'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'runningStatus') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }

      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.setFormUserInfo()
      this.addList = []
      this.fileList = []
      this.open = true
      this.title = '添加设备'
    },
    clearFiles(){
      this.fileList = []
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset()
      const id = {
        equipmentIdKey: row.equipmentId,
        equipmentType: row.equipmentType,
      }
      editQuery(id).then((response) => {
        this.form = response.data.sEquipment
        let tempArr = response.data.construction
        let dataArr = response.data.addProperties || []
        tempArr.forEach((e) => {
          if (
            e.deviceCondition == 'select' ||
            e.deviceCondition == 'checkbox' ||
            e.deviceCondition == 'radio'
          ) {
            this.getDicts(e.dataSource).then((response) => {
              this.$set(e, 'options', response.data)
            })
          }
        })
        if (dataArr.length) {
          dataArr.forEach((element) => {
            for (let key in tempArr) {
              if (tempArr[key].deviceName == element.deviceName) {
                  if (element.deviceCondition == 'checkbox') {
                    // tempArr[key].value = element.value.split(',')
                    this.$set(tempArr[key], 'value', element.value.split(','))
                  } else {
                    this.$set(tempArr[key], 'value', element.value)
                    // tempArr[key].value = element.value
                  }
                break
              }
            }
          })
        }
        this.addList = tempArr
        this.open = true
        this.title = '修改设备'
        if(this.form.fileList){
          this.fileList = JSON.parse(this.form.fileList)
         
        }else{
          this.fileList = []
        }
        // this.imgInit(this.form.fileList)
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.form.fileList = JSON.stringify(this.fileList)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let addArr = []
          this.addList.forEach((element) => {
            let map = {
              deviceCondition: element.deviceCondition,
              deviceName: element.deviceName,
              equipmentType: element.equipmentType,
            }
            if (element.deviceCondition == 'checkbox') {
              map.value = element.value.join()
            } else {
              map.value = element.value
            }
            if (element.unit) map.unit = element.unit
            if (element.dataSource) map.dataSource = element.dataSource
            addArr.push(map)
          })
          if (this.title == '修改设备') {
            let data = {
              sEquipment: this.form,
              addProp: addArr,
            }
            saveOrUpdate(data).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            let data = {
              sEquipment: this.form,
              addProp: addArr,
            }
            console.log(data)
            saveOrUpdate(data).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = this.form.id
      this.$confirm(
        '是否删除设备ID为"' + this.form.equipmentId + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(function () {
          return delEquipment(ids)
        })
        .then(() => {
          this.getList()
          this.open = false
          this.msgSuccess('删除成功')
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有设备数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return exportEquipment(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '设备据导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg)
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 文件上传
    imgUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5
      if (!isRightSize) {
        this.$message.error('文件大小超过 5MB')
      }
      return isRightSize
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    imgFileSuccess(e){
      this.fileList.push({name: '', url: process.env.VUE_APP_BASE_API + e.fileName})
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    }

  },
}
</script>
<style scoped lang="scss">
.colStyle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.searchBox {
  min-width: 50px;
  height: 28px;
  margin-top: 6px;
  border-radius: 14px;
  display: flex;
  font-size: 13px;
  background: #d7d7d7;
  line-height: 28px;
  margin-left: 6px;
  .text {
    padding-left: 14px;
    padding-right: 7px;
  }
  .icon {
    padding-right: 5px;
    display: flex;
    align-items: center;
    i {
      font-size: 20px;
      color: red;
    }
  }
}

.name {
  display: flex;
  flex-direction: column;
}
.title {
  color: #333;
  font-size: 14px;
}
.detail {
  display: flex;
  color: #7f7f7f;
  font-size: 12px;
}
.ml20 {
  margin-left: 20px;
}
.h28 {
  height: 28px;
  margin-top: 3px;
}
.resNum {
  margin-top: 2px;
  font-size: 14px;
}
</style>
